<html xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
    <title>首页</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="../../static/react/react.development.js" type="text/javascript"></script>
    <script src="../../static/react/react-dom.development.js" type="text/javascript"></script>
	<script src="../../static/react/moment-with-locales.min.js" type="text/javascript"></script>
	<script src="../../static/react/babel.min.js" type="text/javascript"></script>
	<!-- antd -->
    <link href="../../static/react/antd/antd.min.css" rel="stylesheet" type="text/css" />
	<script src="../../static/react/antd/antd-with-locales.min.js" type="text/javascript"></script>
    <!-- axios -->
    <script src="../../static/react/axios.min.js" type="text/javascript"></script>
    <script src="../../static/react/qs.js" type="text/javascript"></script>
    <script src="../../static/react/lodash.min.js" type="text/javascript"></script>
    <script src="../../static/react/request.js" type="text/javascript"></script>
    <link href="../../static/react/common.css" rel="stylesheet" type="text/css" />
    <style>
        .dbox{
            padding:8px 0px 15px 8px;
            margin-left: 20px;
            border: 1px solid #b2d5e7;
            box-shadow: -2px -2px 2px 2px #ccc,2px 2px 2px 2px #ccc;
            blur:1px;
        }
        .badge{
            width: 285px;
        }
    </style>
<script type="text/babel">
    const baseURL = "../../"
    const { Row, Col , Divider, Card, List} = antd
    class App extends React.Component {
        constructor(props){
            super(props)
            this.query = this.query.bind(this)
            this.state = {
                timedTasks: [],
                list: [],
                sAgentInfoList: []

            }
        }
        query() {
            const self = this
            API.request({
                baseURL: baseURL,
                method: "post",
                url: "api/batch/home/pages"
            }).then(function(data){
                self.setState({
                    list: data.rows
                })
                
            })
            // load agent
            API.request({
                baseURL: baseURL,
                method: "post",
                url: "api/s/agent/infos"
            }).then(function(data){
                self.setState({
                    sAgentInfoList: data.rows
                })
            })
        }
        componentDidMount() {
            this.query()
        }
        render() {
            return (
                <div>
                    <Row>
                        <Col span={24}>
                            <Card title={"业务系统："+ this.state.list.length + "个"} >
                                <Row gutter={24}>
                                    {
                                        this.state.list.map((item, index)=>(
                                            <Col span={4} key={index.toString()}>
                                                <Card title={item.subsName} 
                                                    headStyle={{backgroundColor: "#bee5eb" }} bodyStyle={{paddingTop: "2px", paddingBottom: "2px"}}>
                                                    <List dataSource={[
                                                        "批次数量：" + item.batchNumber,
                                                        "已完成：" + item.hpFinish,
                                                        "执行中：" + item.hpRunning,
                                                        "异常：" + item.hpError,
                                                        ]}
                                                        size="small"
                                                        renderItem={item => (
                                                            <List.Item key={item}>{item}</List.Item>
                                                        )} 
                                                    />
                                                </Card>
                                            </Col>  
                                        ))
                                    }  
                                </Row>
                            </Card>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={24}>
                            <Card title={"执行节点："+ this.state.list.length + "个"} >
                                <Row gutter={24}>
                                    {
                                        this.state.sAgentInfoList.map((item, index)=>(
                                            <Col span={6} key={index.toString()}>
                                                <List size="small" bordered>
                                                    <List.Item key="agentName" style={{color: "#0c5460", backgroundColor: "#bee5eb"}}>{item.agentName}</List.Item>
                                                    <List.Item key="agentUrl" style={{color: "#856404", backgroundColor: "#ffeeba"}}>{item.agentUrl}</List.Item>
                                                    {
                                                        item.agentState == 'R' && <List.Item key="agentState" style={{color: "#155724", backgroundColor: "#c3e6cb"}}>状态：正常</List.Item> 
                                                            || <List.Item key="agentStateError" style={{color: "#721c24", backgroundColor: "#f5c6cb"}}>状态：异常</List.Item>
                                                    }
                                                </List>
                                            </Col>  
                                        ))
                                    }  
                                </Row>
                            </Card>
                        </Col>
                    </Row>
                </div>
            )
        }
    }
    ReactDOM.render(
        <antd.ConfigProvider locale={antd.locales.zh_CN}>
            <App />
        </antd.ConfigProvider>,
        document.getElementById('app')
    );
    

</script>
</head>
<body>
    <div id="app"> </div>
</body>
</html>
